<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外协列表</title>
    <#include "/header.html">
    <style>
        .el-radio-group{
            vertical-align: baseline;
        }
        .el-radio__inner{
            display: none;
        }
        .elform-span{
            font-size: 14px;
            color: #606266;
        }
    </style>
</head>
<body>
    <div id="twbOrderSupplierApp" v-cloak>
        <!-- 订单状态、统计 -->
        <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <span style="font-weight: bold;color: #409EFF">订单状态：</span>
                    <template>
                        <el-radio-group v-model="q.proStatus" @change="search">
                            <el-radio :label="1">全部</el-radio>
                            <el-radio :label="2">生产中</el-radio>
                            <el-radio :label="3">生产完成</el-radio>
                        </el-radio-group>
                    </template>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <el-row>
                        <el-col :span="7"><span style="font-weight: bold;color: #409EFF">外协订单统计：</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="elform-span">当天新订单： {{suppStatistics.dayOrderCount}}</span></el-col>
                        <el-col :span="5"><span class="elform-span">当月新订单： {{suppStatistics.monthOrderCount}}</span></el-col>
                        <el-col :span="5"><span class="elform-span">当年新订单： {{suppStatistics.yearOrderCount}}</span></el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <div style="margin-bottom: 10px;"></div>
        <el-row>
            <el-col :span="8"><div class="grid-content bg-purple">
                <span style="font-weight: bold;color: #409EFF">付款状态：</span>
                <template>
                    <el-radio-group v-model="q.finStatus" @change="search">
                        <el-radio :label="1">全部</el-radio>
                        <el-radio :label="2">未付款</el-radio>
                        <el-radio :label="3">已付款</el-radio>
                    </el-radio-group>
                </template>
            </div></el-col>
            <el-col :span="16"><div class="grid-content bg-purple">
                <el-row>
                    <el-col :span="7"><span style="font-weight: bold;color: #409EFF">外协费用统计：</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="elform-span">当天费用： {{suppStatistics.daySuppCost}}</span></el-col>
                    <el-col :span="5"><span class="elform-span">当月费用： {{suppStatistics.monthSuppCost}}</span></el-col>
                    <el-col :span="5"><span class="elform-span">当年费用： {{suppStatistics.yearSuppCost}}</span></el-col>
                </el-row>
            </div></el-col>
        </el-row>

        <div style="margin-bottom: 15px;"></div>

        <!-- 查询条件 -->
        <el-row>
            <el-form :inline="true" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-input v-model.trim="q.orderNo" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="q.producerName" placeholder="供应商名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            style="width: 300px"
                            v-model="q.createTime"
                            type="daterange"
                            align="right"
                            value-format="yyyy-MM-dd"
                            unlink-panels
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" plain size="small" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" @click="reset"  plain size="small" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <!-- 付款、收货操作 -->
        <el-row>
            <el-button type="primary" @click="batchPaymentDialog" plain size="small">批量付款</el-button>
            <el-button type="primary" @click="batchReceiveGoods" plain size="small">批量收货</el-button>
        </el-row>

        <div style="margin-bottom: 15px;"></div>

        <!-- 列表 -->
        <el-table size="mini" ref="twbOrderSupplierTable" :data="twbOrderSupplierData" border style="width: 100%" >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="orderNo" label="订单号"></el-table-column>
            <el-table-column prop="producerName" label="供应商名称"></el-table-column>
            <el-table-column prop="twbProductionStatusText" label="生产状态"></el-table-column>
            <el-table-column prop="totalAmount" label="原订单金额"></el-table-column>
            <el-table-column prop="cost" label="外协金额"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="createName" label="创建人"></el-table-column>
            <el-table-column prop="memo" label="订单备注" show-overflow-tooltip></el-table-column>
            <el-table-column prop="twbFinanceStatusText" label="付款状态">
                <template slot-scope="scope">
                    <span style="color: #67C23A;" v-if="scope.row.twbFinanceStatusText == '已付款'">{{scope.row.twbFinanceStatusText}}</span>
                    <span style="color: #F56C6C;" v-else>{{scope.row.twbFinanceStatusText}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="financePaytime" label="付款时间"></el-table-column>
        </el-table>

        <div style="text-align: center;margin: 15px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSizes"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="page.total">
            </el-pagination>
        </div>

        <!-- 付款弹框 -->
        <el-dialog title="批量付款" :visible.sync="suppPayFormVisible" width="420px">
            <el-form :model="suppPayForm">
                <el-form-item label="付款日期" label-width="80px">
                    <el-date-picker v-model="suppPayForm.financePaytime" type="datetime" placeholder="选择日期" format="yyyy 年 MM 月 dd 日 HH:mm:ss" style="width: 300px;"></el-date-picker>
                </el-form-item>
                <el-form-item label="付款备注" label-width="80px">
                    <el-input v-model="suppPayForm.financeRemark" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入备注信息">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="batchPayment" size="mini">确 定</el-button>
                <el-button @click="suppPayFormVisible = false" size="mini">取 消</el-button>
            </div>
        </el-dialog>

    </div>
<script src="${request.contextPath}/statics/js/modules/order/twbOrderSupplier.js?_${.now?long}"></script>
</body>
</html>